<template>
  <common-dialog :dialogVisible="dialogVisible" width="40%" :title="'批量编辑'" @cancel="cancel" @ok="ok">
    <div v-for="col in showSlotComponents" class='row'>
      <span class='label'>{{col.displayName}}:</span>
      <a-auto-complete v-if="col.slotType == 'completetxt'" class='value' :disabled='col.message.length > 0'
        :filter-option="filterOption" :data-source="getKey(col)" @change='completeChange($event,col)'/>
      <a-select v-if="col.slotType == 'dropdown'" @change='downDropChange' class='value' :disabled='col.message.length > 0'>
        <a-select-option v-for="item in col.editInfo" :key='item.value' :value="item.value">
          {{item.label}}
        </a-select-option>
      </a-select>
      <p v-if='col.message.length > 0' class='error-message'>{{col.message}}</p>
    </div>
  </common-dialog>
</template>
<script>
import { mapGetters } from 'vuex'
import commonDialog from '@/components/common/commonDialog'
import completetxt from '@/components/pubTable/components/columns/completetxt'
import dropdown from '@/components/pubTable/components/columns/dropdown'
export default {
  components: { commonDialog,dropdown,completetxt },
  computed: {
    ...mapGetters({
      getStoreColumns: 'getPlanColumns',
      getSlotColumns: 'getSlotColumns',
    })
  },
  data() {
    return {
      dialogVisible: false,
      showSlotIndex: ['reviewerReference','editorReference','resource'],
      showSlotComponents: [],
      stateLimit: [
        'COMPLETED',
        'PENDINGAPPROVAL'
      ],
      dataSource: []
    }
  },
  methods: {
    completeChange(value,col) {
      const selVal = col.editInfo.find(item => item.label == value).value
      this.showSlotComponents.find(item => item.dataIndex == col.dataIndex).value = selVal
    },
    downDropChange(value) {
      this.showSlotComponents.find(item => item.dataIndex == 'editorReference').value = value
    },
    //不区分大小写
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
      );
    },
    getKey(col) {
      let temp = []
      col.editInfo.forEach(item => {
        temp.push(item.label)
      })
      return temp
    },
    show(menuRecord) {
      const self = this;
      self.dataSource = menuRecord
      self.dialogVisible = true
      self.showSlotComponents = self.getSlotColumns(self.getStoreColumns()).filter(item => self.showSlotIndex.includes(item.dataIndex))
      self.showSlotComponents.forEach(col => {
        col.value = null;
        col.message = self.verifyData(col)
        
      })
    },
    verifyData(col) {
      let lock = [],perssion = [],state = [],children = [],backMsg = ''
      this.dataSource.forEach(data => {
        //被锁了不能编辑
        if (data['lock.locked'] != undefined && data['lock.locked'])
          lock.push(data.name)
        //没权限不能编辑
        if (!data.actionPerssion)
          perssion.push(data.name)
        if (this.statePermission(data))
          state.push(data.name)
        if (col.dataIndex != "editorReference" && data.activityType == 'WBS')
          children.push(data.name)
      })
      if (lock.length > 0)
        backMsg += `${lock.join('、')}任务已被锁定`
      if (perssion.length > 0)
        backMsg += `${backMsg.length > 0 ? "，" : ""}${perssion.join('、')}任务没有操作权限`
      if (state.length > 0)
        backMsg += `${backMsg.length > 0 ? "，" : ""}${state.join('、')}任务状态需为"未发布"、"进行中"`
      if (children.length > 0)
        backMsg += `${backMsg.length > 0 ? "，" : ""}${children.join('、')}任务为WBS节点`
      if (backMsg != '')
        backMsg += `。${col.displayName}不能编辑`
      return backMsg
    },
    //已完成 待审核 不能编辑
    statePermission(data) {
      return this.stateLimit.includes(data.plannableStatus)
    },
    cancel() {
      this.dialogVisible = false
    },
    // 确认按钮
    ok() {
      // 操作
      this.$emit('submitBatch',this.showSlotComponents,this.dataSource)
      Object.assign(this.$data,this.$options.data())
      this.cancel()
    }
  }
}
</script>
<style lang="less" scoped>
.row{
  line-height: 35px;
}
.label{
  width: 50px;
  display: inline-block;
}
.value {
  display: inline-block;
  width: calc(100% - 50px)
}
.error-message {
  line-height: 12px;
  font-size: 12px;
  margin-bottom: 10px;
  color: #ee0000;
}
</style>